<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="css/bootstrap.css">
	<script src="js/jquery.min.js"></script>
	<script src="js/popper.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<link rel="stylesheet" type="text/css" href="css/comm.css"/>
	<link rel="stylesheet" type="text/css" href="css/list.css"/>
	<title>Document</title>
</head>
<body>
	<header>
		<iframe class="my_header" src="header.html" scrolling="no"></iframe>
	</header>
	
	
	<div class ="container">
		<!-- 大banner图 -->
		<div class="mt-2 mb-3"><img class="w-100" src="img/index/index_guild.png" ></div>
		
		
		<!-- 列表 -->
		<div class="row mx-0">
			
			
			<!-- 左 -->
			<div class="col-md-9 col-sm-12">
				<h6 class="text-muted p-3 text_small my_gray">笔记本电脑</h6>
				<!-- 列表主体 -->
				<div class="row bg-white mx-0">
					<!-- 1 -->
					<div class="col-lg-4 col-md-6 col-sm-12 p-2">
						<div class="card bg-transparent">
							<a class="d-flex justify-content-around align-content-center" href=""><img class="w-75 my_img1" src="img/products/57b12a31N8f4f75a3.jpeg" ></a>
							<h4 class="text-primary">￥6988.00</h4>
							<a class="text-muted text_small mb-1" href="">Apple MacBook Air 13.3英寸笔记本 银色(Core i5 处理器/8GB内存/128GB SSD闪存 MMGF2CH/A)</a>
							<div class="d-flex justify-content-around align-content-center mb-3">
								<button class="my_btn1">-</button>
								<input class="border-0 text-center my_input1" type="text" value="1" />
								<button class="my_btn1">+</button>
								<a class="btn btn-primary" href="">加入购物车</a>
							</div>
						</div>
					</div>
					
					<!-- 2 -->
					<div class="col-lg-4 col-md-6 col-sm-12 p-2">
						<div class="card bg-transparent">
							<a class="d-flex justify-content-around align-content-center" href=""><img class="w-75 my_img1" src="img/products/57b12a31N8f4f75a3.jpeg" ></a>
							<h4 class="text-primary">￥6988.00</h4>
							<a class="text-muted text_small mb-1" href="">Apple MacBook Air 13.3英寸笔记本 银色(Core i5 处理器/8GB内存/128GB SSD闪存 MMGF2CH/A)</a>
							<div class="d-flex justify-content-around align-content-center mb-3">
								<button class="my_btn1">-</button>
								<input class="border-0 text-center my_input1" type="text" value="1" />
								<button class="my_btn1">+</button>
								<a class="btn btn-primary" href="">加入购物车</a>
							</div>
						</div>
					</div>
					
					<!-- 3 -->
					<div class="col-lg-4 col-md-6 col-sm-12 p-2">
						<div class="card bg-transparent">
							<a class="d-flex justify-content-around align-content-center" href=""><img class="w-75 my_img1" src="img/products/57b12a31N8f4f75a3.jpeg" ></a>
							<h4 class="text-primary">￥6988.00</h4>
							<a class="text-muted text_small mb-1" href="">Apple MacBook Air 13.3英寸笔记本 银色(Core i5 处理器/8GB内存/128GB SSD闪存 MMGF2CH/A)</a>
							<div class="d-flex justify-content-around align-content-center mb-3">
								<button class="my_btn1">-</button>
								<input class="border-0 text-center my_input1" type="text" value="1" />
								<button class="my_btn1">+</button>
								<a class="btn btn-primary" href="">加入购物车</a>
							</div>
						</div>
					</div>
					
					<!-- 4 -->
					<div class="col-lg-4 col-md-6 col-sm-12 p-2">
						<div class="card bg-transparent">
							<a class="d-flex justify-content-around align-content-center" href=""><img class="w-75 my_img1" src="img/products/57b12a31N8f4f75a3.jpeg" ></a>
							<h4 class="text-primary">￥6988.00</h4>
							<a class="text-muted text_small mb-1" href="">Apple MacBook Air 13.3英寸笔记本 银色(Core i5 处理器/8GB内存/128GB SSD闪存 MMGF2CH/A)</a>
							<div class="d-flex justify-content-around align-content-center mb-3">
								<button class="my_btn1">-</button>
								<input class="border-0 text-center my_input1" type="text" value="1" />
								<button class="my_btn1">+</button>
								<a class="btn btn-primary" href="">加入购物车</a>
							</div>
						</div>
					</div>
					
					<!-- 5 -->
					<div class="col-lg-4 col-md-6 col-sm-12 p-2">
						<div class="card bg-transparent">
							<a class="d-flex justify-content-around align-content-center" href=""><img class="w-75 my_img1" src="img/products/57b12a31N8f4f75a3.jpeg" ></a>
							<h4 class="text-primary">￥6988.00</h4>
							<a class="text-muted text_small mb-1" href="">Apple MacBook Air 13.3英寸笔记本 银色(Core i5 处理器/8GB内存/128GB SSD闪存 MMGF2CH/A)</a>
							<div class="d-flex justify-content-around align-content-center mb-3">
								<button class="my_btn1">-</button>
								<input class="border-0 text-center my_input1" type="text" value="1" />
								<button class="my_btn1">+</button>
								<a class="btn btn-primary" href="">加入购物车</a>
							</div>
						</div>
					</div>
					
					<!-- 6 -->
					<div class="col-lg-4 col-md-6 col-sm-12 p-2">
						<div class="card bg-transparent">
							<a class="d-flex justify-content-around align-content-center" href=""><img class="w-75 my_img1" src="img/products/57b12a31N8f4f75a3.jpeg" ></a>
							<h4 class="text-primary">￥6988.00</h4>
							<a class="text-muted text_small mb-1" href="">Apple MacBook Air 13.3英寸笔记本 银色(Core i5 处理器/8GB内存/128GB SSD闪存 MMGF2CH/A)</a>
							<div class="d-flex justify-content-around align-content-center mb-3">
								<button class="my_btn1">-</button>
								<input class="border-0 text-center my_input1" type="text" value="1" />
								<button class="my_btn1">+</button>
								<a class="btn btn-primary" href="">加入购物车</a>
							</div>
						</div>
					</div>
					
					<!-- 7 -->
					<div class="col-lg-4 col-md-6 col-sm-12 p-2">
						<div class="card bg-transparent">
							<a class="d-flex justify-content-around align-content-center" href=""><img class="w-75 my_img1" src="img/products/57b12a31N8f4f75a3.jpeg" ></a>
							<h4 class="text-primary">￥6988.00</h4>
							<a class="text-muted text_small mb-1" href="">Apple MacBook Air 13.3英寸笔记本 银色(Core i5 处理器/8GB内存/128GB SSD闪存 MMGF2CH/A)</a>
							<div class="d-flex justify-content-around align-content-center mb-3">
								<button class="my_btn1">-</button>
								<input class="border-0 text-center my_input1" type="text" value="1" />
								<button class="my_btn1">+</button>
								<a class="btn btn-primary" href="">加入购物车</a>
							</div>
						</div>
					</div>
					
					<!-- 8 -->
					<div class="col-lg-4 col-md-6 col-sm-12 p-2">
						<div class="card bg-transparent">
							<a class="d-flex justify-content-around align-content-center" href=""><img class="w-75 my_img1" src="img/products/57b12a31N8f4f75a3.jpeg" ></a>
							<h4 class="text-primary">￥6988.00</h4>
							<a class="text-muted text_small mb-1" href="">Apple MacBook Air 13.3英寸笔记本 银色(Core i5 处理器/8GB内存/128GB SSD闪存 MMGF2CH/A)</a>
							<div class="d-flex justify-content-around align-content-center mb-3">
								<button class="my_btn1">-</button>
								<input class="border-0 text-center my_input1" type="text" value="1" />
								<button class="my_btn1">+</button>
								<a class="btn btn-primary" href="">加入购物车</a>
							</div>
						</div>
					</div>
					
					<!-- 9 -->
					<div class="col-lg-4 col-md-6 col-sm-12 p-2">
						<div class="card bg-transparent">
							<a class="d-flex justify-content-around align-content-center" href=""><img class="w-75 my_img1" src="img/products/57b12a31N8f4f75a3.jpeg" ></a>
							<h4 class="text-primary">￥6988.00</h4>
							<a class="text-muted text_small mb-1" href="">Apple MacBook Air 13.3英寸笔记本 银色(Core i5 处理器/8GB内存/128GB SSD闪存 MMGF2CH/A)</a>
							<div class="d-flex justify-content-around align-content-center mb-3">
								<button class="my_btn1">-</button>
								<input class="border-0 text-center my_input1" type="text" value="1" />
								<button class="my_btn1">+</button>
								<a class="btn btn-primary" href="">加入购物车</a>
							</div>
						</div>
					</div>
				</div>
				<!-- 分页 -->
				<div class="my_gray p-2">
					<ul class="pagination mb-0 justify-content-end">
						<!-- 1 -->
						<li class="page-item disabled">
							<a class="page-link bg-transparent" href="">上一页</a>
						</li>
						<!-- 2 -->
						<li class="page-item active">
							<a class="page-link bg-transparent" href="">1</a>
						</li>
						<!-- 3 -->
						<li class="page-item">
							<a class="page-link bg-transparent" href="">2</a>
						</li>
						<!-- 4 -->
						<li class="page-item">
							<a class="page-link bg-transparent" href="">3</a>
						</li>
						<!-- 5 -->
						<li class="page-item">
							<a class="page-link bg-transparent" href="">4</a>
						</li>
						<!-- 6 -->
						<li class="page-item">
							<a class="page-link bg-transparent" href="">5</a>
						</li>
						<!-- 7 -->
						<li class="page-item">
							<a class="page-link bg-transparent" href="">下一页</a>
						</li>
					</ul>
				</div>
			</div>
			
			
			<!-- 右 -->
			<div class="col-md-3 col-sm-12">
				<h6 class="my_gray p-3 text-muted mb-0">
					<img class="mr-2" src="img/products/notice.png" >商家公告
				</h6>
				<div class="bg-white p-2">
					Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus nihil sit illo sunt veniam, ducimus cum rem pariatur voluptate. Tempore possimus aspernatur molestiae obcaecati eaque odit similique quaerat ab delectus.
				</div>
				
				<!-- 购物车 -->
				<ul class="list-group mt-4">
					<!-- 1第一行 -->
					<li class="list-group-item d-flex justify-content-between my_gray">
						<span class="text-muted text_small">购物车</span>
						<a class="text-muted text_small" href="">清空</a>
					</li>
					
					<!-- 2中间行 -->
					<!-- 1 -->
					<li class="list-group-item border-top d-flex justify-content-around p-1 align-items-center">
						<span class="text-truncate text_small text-muted w-25">联想(ThinkPad)轻薄系列E470c(20H3A004CD)14英寸笔记本电脑(i5-6200U 8G 500G 2G独显 Win10)黑色</span>
						<button class="my_btn2">-</button>
						<input class="my_input2 text-center" type="text" value="1" />
						<button class="my_btn2">+</button>
						<span class="text_small text-muted w-25">￥6999.00</span>
					</li>
					
					<!-- 2 -->
					<li class="list-group-item border-top d-flex justify-content-around p-1 align-items-center">
						<span class="text-truncate text_small text-muted w-25">联想(ThinkPad)轻薄系列E470c(20H3A004CD)14英寸笔记本电脑(i5-6200U 8G 500G 2G独显 Win10)黑色</span>
						<button class="my_btn2">-</button>
						<input class="my_input2 text-center" type="text" value="1" />
						<button class="my_btn2">+</button>
						<span class="text_small text-muted w-25">￥6999.00</span>
					</li>
					
					<!-- 3 -->
					<li class="list-group-item border-top d-flex justify-content-around p-1 align-items-center">
						<span class="text-truncate text_small text-muted w-25">联想(ThinkPad)轻薄系列E470c(20H3A004CD)14英寸笔记本电脑(i5-6200U 8G 500G 2G独显 Win10)黑色</span>
						<button class="my_btn2">-</button>
						<input class="my_input2 text-center" type="text" value="1" />
						<button class="my_btn2">+</button>
						<span class="text_small text-muted w-25">￥6999.00</span>
					</li>
					
					<!-- 4 -->
					<li class="list-group-item border-top d-flex justify-content-around p-1 align-items-center">
						<span class="text-truncate text_small text-muted w-25">联想(ThinkPad)轻薄系列E470c(20H3A004CD)14英寸笔记本电脑(i5-6200U 8G 500G 2G独显 Win10)黑色</span>
						<button class="my_btn2">-</button>
						<input class="my_input2 text-center" type="text" value="1" />
						<button class="my_btn2">+</button>
						<span class="text_small text-muted w-25">￥6999.00</span>
					</li>
					
					<!-- 5 -->
					<li class="list-group-item border-top d-flex justify-content-around p-1 align-items-center">
						<span class="text-truncate text_small text-muted w-25">联想(ThinkPad)轻薄系列E470c(20H3A004CD)14英寸笔记本电脑(i5-6200U 8G 500G 2G独显 Win10)黑色</span>
						<button class="my_btn2">-</button>
						<input class="my_input2 text-center" type="text" value="1" />
						<button class="my_btn2">+</button>
						<span class="text_small text-muted w-25">￥6999.00</span>
					</li>
					
					<!-- 3结尾行 -->
					<li class="list-group-item d-flex justify-content-between bg-secondary border-top p-0 align-items-center">
						<h5 class="text-white mb-0">
							<img src="img/products/car.png" >
							¥39531.00
						</h5>
						<a class="p-2 mb-0 bg-primary font-weight-bold text-white h5" href="">去结算</a>
					</li>
				</ul>
				
			</div>
		</div>
		
		
		
	</div>
	
	
	<footer>
		<iframe class="my_footer" src="footer.html" scrolling="no"></iframe>
</body>
</html>